<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
            list-style:none;
        }
        .box{
            width: 520px;
            height: 280px;
            border:1px solid red;
            margin:100px auto 0;
            position: relative;
            /* overflow: hidden; */
        }
        .box ul{
            /* width: 2600px; */
            width:3120px;
            /* 因为将来要移动ul，所以需要定位 */
            position: absolute;
            left:0;
            top:0;
        }
        .box ul li{
            float:left;
        }
        .box ol{
            position: absolute;
            left:50%;
            bottom:10px;
            /* background-color: red; */
            margin-left: -100px;
        }
        .box ol li{
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color:orange;
            float: left;
            margin:5px 10px;    
            cursor: pointer;        
        }
        .box .current{
            background-color: #fff;
        }
        .box span{
            width:40px;
            height:60px;
            background-color:rgba(0,255,0,0.6);
            position: absolute;
            top:50%;
            margin-top: -30px;
            cursor: pointer;
        }
        .box .arrow-l{
            left:0;
        }
        .box .arrow-r{
            right:0;
        }
    </style>
    <script src="jquery-1.12.2.js"></script>
    <script>
        $(function(){
            //功能描述： 左右箭头点击  焦点点击  定时器播放  
            var imgCount = 0; 
            //克隆第一个元素到最后
           var firstLi= $("#imgBox >li").eq(0).clone(true);
           $("#imgBox").append(firstLi);
            //右边箭头点击
            $('#arrowRight').click(function(){
                imgCount++;
                if(imgCount>5){
                    $('#imgBox').css('left','0');
                    imgCount=1;
                }
                var move = -imgCount*$('.box').width();
                $('#imgBox').stop().animate({'left':move},500); 
                //焦点切换
                if(imgCount==5){
                    $('#dianBox > li').eq(0).addClass('current').siblings().removeClass('current'); 
                }else{
                    $('#dianBox > li').eq(imgCount).addClass('current').siblings().removeClass('current');   
                }
                           
            });    

             $('#arrowLeft').click(function(){
                imgCount--;
                if(imgCount<0){
                    $('#imgBox').css('left','-2600px');
                    imgCount=4;
                }
                var move = -imgCount*$('.box').width();
                $('#imgBox').stop().animate({'left':move},500); 
                //焦点切换
                $('#dianBox > li').eq(imgCount).addClass('current').siblings().removeClass('current');               
            });    

            //点击焦点切换
            $('#dianBox>li').click(function(){
                imgCount=$(this).index();
                var move = -imgCount*$('.box').width();
                $('#imgBox').stop().animate({'left':move},500); 
                //焦点切换
                $('#dianBox > li').eq(imgCount).addClass('current').siblings().removeClass('current');  
            });
            
            //定时器切换移动
            var timer = setInterval(function(){
                $("#arrowRight").click();
            },2000);

            //鼠标移入移除清除添加定时器
            $('.box').hover(function(){
                clearInterval(timer);
            },function(){
                timer = setInterval(function(){
                    $("#arrowRight").click();
                },2000);
            });
            

        });
    </script>
</head>
<body>
    <div class="box">
        <ul id="imgBox">
            <li><img src="images/banner1.jpg" alt=""></li>
            <li><img src="images/banner2.jpg" alt=""></li>
            <li><img src="images/banner3.jpg" alt=""></li>
            <li><img src="images/banner4.jpg" alt=""></li>
            <li><img src="images/banner5.jpg" alt=""></li>
        </ul>
        <ol id="dianBox">
            <li class="current"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
        <span class="arrow-l" id="arrowLeft"></span>
        <span class="arrow-r" id="arrowRight"></span>
    </div>

      

</body>
</html>